|
最后一个踏板也挂了一点......
那是因为--total-animation-duration相对于动画延迟，它大于花瓣完成一个周期所需的时间（这是您用来计算动画的公式的结果） -延迟。）
解决方案- 将--animation-speed增加到0.6s。（如果您想将其保持为 0.4 秒，则必须将 --total-animation-duration 减少到 2 秒。）第二个问题是花瓣在动画开始时完全可见。
:root {
--animation-speed: 0.6s;
/* Total animation time for each petal */
--fill-time: 0.1s;
/* Time each petal stays filled before the next starts */
--total-animation-duration: 3s;
/* Total cycle time */
}
body {
background: black
}
.icon__flower {
display: block;
height: 105px;
margin: auto;
width: 110px;
}
/* Keyframes for the fill animation */
@keyframes fillAnimation {
0%,
100% {
fill-opacity: 0;
}
5%,
25% {
fill-opacity: 1;
}
}
/* Apply the fill animation to each petal */
.icon__flower path {
fill-opacity: 0;
animation: fillAnimation var(--total-animation-duration) infinite;
}
.icon__flower path:nth-child(1) {
animation-delay: calc(0 * var(--animation-speed) + var(--fill-time));
}
.icon__flower path:nth-child(2) {
animation-delay: calc(1 * var(--animation-speed) + var(--fill-time));
}
.icon__flower path:nth-child(3) {
animation-delay: calc(2 * var(--animation-speed) + var(--fill-time));
}
.icon__flower path:nth-child(4) {
animation-delay: calc(3 * var(--animation-speed) + var(--fill-time));
}
.icon__flower path:nth-child(5) {
animation-delay: calc(4 * var(--animation-speed) + var(--fill-time));
}
|